<!-- 我的求租 -->
<template>
  <view class="rental-wanted">
    <!-- 列表页面 -->
    <view v-if="!isAdding" style="padding: 0 20rpx">
      <view class="add-btn" style="z-index: 999;">
        <u-button type="primary" @click="showAddForm">免费发布信息</u-button>
      </view>
      <view class="wanted-list">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="location">
            {{ item.parkingIotName }}
            <text
              class="tag"
              v-if="item.hasChargingPile == 1"
              :class="item.hasChargingPile ? 'no' : 'has'"
            >
              需充电桩
            </text>
          </view>
          <view class="desc">车位描述：{{ item.parkingSpaceDesc }}</view>
          <view class="info">
            <view class="user">{{ item.contactName }}</view>
            <view class="time">发布时间：{{ item.creatorTime }}</view>
          </view>
          <view class="bottom">
            <view class="price">预期价格：{{ item.price }}元</view>
            <view class="actions">
              <u-button
                size="mini"
                customStyle="width: 80rpx;"
                @click="onShare(item)"
                shape="circle"
                >分享</u-button
              >
              <u-button
                customStyle="width: 120rpx;"
                v-if="currentType == 'All'"
                size="mini"
                plain
                type="primary"
                shape="circle"
                @click="onCall(item)"
                >拨打电话</u-button
              >
              <u-button
                v-if="currentType == 'self'"
                customStyle="width: 120rpx;"
                size="mini"
                type="primary"
                shape="circle"
                @click="onEdit(item)"
                >修改信息</u-button
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 新增表单页面 -->
    <view v-else class="form-container" style="padding: 20rpx">
      <u--form
        :model="formData"
        ref="uForm"
        :rules="rules"
        labelPosition="left"
        labelWidth="230rpx"
      >
        <u-form-item label="停车场名称" prop="parkingIotName" borderBottom>
          <u--input
            v-model="formData.parkingIotName"
            placeholder="请输入小区或大厦"
            border="none"
          />
        </u-form-item>

        <u-form-item label="预估价格" prop="price" borderBottom>
          <u--input
            v-model="formData.price"
            placeholder="请输入xx元/月"
            type="number"
            border="none"
          />
        </u-form-item>

        <u-form-item label="您的称呼" prop="contactName" borderBottom>
          <u--input
            v-model="formData.contactName"
            placeholder="某先生/女士"
            border="none"
          />
        </u-form-item>

        <u-form-item label="是否需要充电桩" prop="hasChargingPile" borderBottom>
          <u-switch v-model="formData.hasChargingPile"></u-switch>
        </u-form-item>

        <u-form-item label="车位描述" prop="parkingSpaceDesc" borderBottom>
          <u-textarea
            v-model="formData.parkingSpaceDesc"
            placeholder="100字以内"
            border="none"
          />
        </u-form-item>

        <u-form-item label="联系电话" prop="contactPhone" borderBottom>
          <u--input
            v-model="formData.contactPhone"
            placeholder="请输入"
            type="number"
            border="none"
          />
        </u-form-item>

        <view class="form-actions">
          <u-button
            type="primary"
            @click="submitForm"
            customStyle="margin-bottom: 20rpx;"
            >发布</u-button
          >
          <u-button @click="cancelAdd" style="margin-top: 20rpx">取消</u-button>
        </view>
      </u--form>
    </view>
  </view>
</template>

<script>
export default {
  name: "RentalWanted",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    currentType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isAdding: false, // 控制显示列表还是表单
      wantedList: [],
      formData: {
        parkingIotName: "",
        price: "",
        contactName: "",
        hasChargingPile: false,
        parkingSpaceDesc: "",
        contactPhone: "",
      },
      rules: {
        parkingIotName: [
          { required: true, message: "请输入停车场名称", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入预估价格", trigger: "blur" }],
        contactName: [
          { required: true, message: "请输入称呼", trigger: "blur" },
        ],
        parkingSpaceDesc: [
          { required: true, message: "请输入车位描述", trigger: "blur" },
        ],
        contactPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onCall(item) {
      uni.makePhoneCall({
        phoneNumber: item.contactPhone,
      });
    },
    onShare(item) {
      uni.setClipboardData({
        data: item.contactPhone, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    onEdit(item) {
      // 实现编辑逻辑
      this.formData = {
        ...item,
        hasChargingPile: item.hasChargingPile == 1 ? true : false,
      };
      this.isAdding = true;
    },
    showAddForm() {
      this.isAdding = true;
    },
    cancelAdd() {
      this.isAdding = false;
      this.formData = {
        parkingIotName: "",
        price: "",
        contactName: "",
        hasChargingPile: false,
        parkingSpaceDesc: "",
        contactPhone: "",
      };
    },
    submitForm() {
      const self = this;
      this.$refs.uForm.validate().then((res) => {
        const formDataToSubmit = {
          ...this.formData,
          hasChargingPile: this.formData.hasChargingPile ? 1 : 0,
          messageType: "PURCHASE_REQUEST",
        };
        self.$httpReq.saveSelfMessageApp(formDataToSubmit).then((res) => {
          console.log(res);
          self.isAdding = false;
          uni.showToast({
            title: "发布成功",
            icon: "success",
          });
          self.$emit("getCurrentTypeList");
        });
      });
    },
  },

  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    if (this.$refs.uForm) {
      this.$refs.uForm.setRules(this.rules);
    }
  },
};
</script>

<style lang="scss" scoped>
.rental-wanted {
  .item {
    background: #ffffff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;

    .location {
      font-size: 32rpx;
      font-weight: bold;

      .tag {
        font-size: 24rpx;
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
        margin-left: 20rpx;

        &.has {
          background: #e1f3d8;
          color: #67c23a;
        }

        &.no {
          background: #fef0f0;
          color: #f56c6c;
        }
      }
    }

    .desc {
      color: #666;
      margin: 16rpx 0;
    }

    .info {
      display: flex;
      justify-content: space-between;
      color: #999;
      font-size: 26rpx;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .price {
        color: #f56c6c;
        font-weight: bold;
      }

      .actions {
        display: flex;
        gap: 20rpx;
      }
    }
  }

  .add-btn {
    position: fixed;
    bottom: 40rpx;
    left: 20rpx;
    right: 20rpx;
    z-index: 999;
  }

  .form-container {
    padding: 30rpx;
    background: #fff;

    .form-actions {
      margin-top: 40rpx;
      text-align: center;
    }
  }
}
</style> 